<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>jQuery Tablesorter filter widget</title>
    
	<link rel="stylesheet" href="../css/style.css" type="text/css" media="print, projection, screen" />
	<link rel="stylesheet" href="../css/jquery.tablesorter.filter.css" type="text/css" />
	
	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.tablesorter.min.js"></script>
	<script type="text/javascript" src="../js/jquery.tablesorter.filter.js"></script>
	<script type="text/javascript">
	
    $(window).load(function() {
    
        $("table#table1").tablesorter({
            widgets: [
                'filter'
            ]
        });
        
    });
	
	</script>	
</head>

<body>
    <h1>jQuery Tablesorter filter widget.</h1>
    <p>The jQuery Tablesorter filter widget makes it possible to filter a table by it's contents.</p>

    <h2>Demo</h2>

    <table id="table1" class="tablesorter"> 
        <thead> 
            <tr>
                <th>Unicode<br />Codepos.</th> 
                <th>Zeichen</th> 
                <th>UTF-8<br />(hex.)</th> 
                <th>Name</th> 
                <th>Unicode 1.0-Zeichennamen (&uuml;berholt)</th> 
            </tr>
        </thead> 
        <tbody>
            <tr class="cev"> 
            <td class="cpt">U+0000</td><td class="charnodisplay">&nbsp;</td><td class="utf8">00</td><td class="name">&lt;control&gt;</td> 
            <td class="name">NULL</td> 
            </tr> 
            <tr class="cod"> 
            <td class="cpt">U+0001</td><td class="charnodisplay">&nbsp;</td><td class="utf8">01</td><td class="name">&lt;control&gt;</td> 
            <td class="name">START OF HEADING</td> 
            </tr> 
            <tr class="cev"> 
            <td class="cpt">U+0002</td><td class="charnodisplay">&nbsp;</td><td class="utf8">02</td><td class="name">&lt;control&gt;</td> 
            <td class="name">START OF TEXT</td> 
            </tr> 
            <tr class="cod"> 
            <td class="cpt">U+0003</td><td class="charnodisplay">&nbsp;</td><td class="utf8">03</td><td class="name">&lt;control&gt;</td> 
            <td class="name">END OF TEXT</td> 
            </tr> 
            <tr class="cev"> 
            <td class="cpt">U+0004</td><td class="charnodisplay">&nbsp;</td><td class="utf8">04</td><td class="name">&lt;control&gt;</td> 
            <td class="name">END OF TRANSMISSION</td> 
            </tr> 
        </tbody>
    </table>
    
    <h2>Source</h2>
    <pre>$("table").tablesorter({
    widgets: [
        'filter'
    ]
});</pre>

    <h2>Options</h2>
    <p>This widget also have some options you pass in at initialization to achieve different effects:</p>
    <table class="tablesorter">
        <thead>
            <tr>
                <th>Property</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>title</td>
                <td>String, false</td>
                <td>Default: 'Search...'</td>
                <td>
                    <p>This parameter will initialize the filter input falue and title atributes. This value will be toggled by focusin/out events.</p>
                    <pre>$("table").tablesorter({
    widgets: [
        'filter'
    ],
    filter: { title: 'Filter...' }
});</pre>
                    <p>To disable this just set the title option to false.</p>
                    <pre>$("table").tablesorter({
    widgets: [
        'filter'
    ],
    filter: { title: false }
});</pre>
                </td>
            </tr>
            <tr>
                <td>container</td>
                <td>Element, Selector</td>
                <td>Default: 'parent'</td>
                <td>
                    <p>This parameter will be used to set the container where the filter input field will be inserted. By default the filter input will be placed before the table in its parrent element.</p>
                    <pre>$("table").tablesorter({
    widgets: [
        'filter'
    ],
    filter: { container: 'div#filterContainer' }
});</pre>
                </td>
            </tr>
        </tbody>
    </table>

	</body>
</html>
